<template>
  <div class="wrapper">
    <!-- 授权前 -->
    <div v-if="!isAuthorized" class="authorized-box">
      <h2 class="title">授权微信小程序</h2>
      <p class="desc">
        您当前未授权微信小程序，授权后，系统可用于生成产品小程序码
      </p>
      <button
        type="submit"
        class="btn btn-primary"
        @click="authorizationClick"
        :disabled="pending"
        :loading="pending"
      >
        授权开通微信小程序
      </button>
    </div>
    <!-- 授权后 -->
    <div v-else class="unauthorized-box">
      <h2 class="title">您当前授权的小程序</h2>
      <div class="flex" style="margin: 24px 0">
        <img
          :src="weChatInfo.attribute.qrCodeOssUrl"
          class="miniProgram-code"
          alt=""
        />
        <div class="company column j-center between">
          <div class="flex a-center">
            <img
              :src="weChatInfo.headImg"
              class="company-logo"
              alt=""
            />
            <span class="company-miniProgramName">{{weChatInfo.nickName}}</span>
          </div>
          <div class="company-name">{{weChatInfo.principalName}}</div>
        </div>
      </div>
      <div class="attention">若想解除授权，请于微信小程序管理后台设置。</div>

      <!-- 解除授权暂时不做 -->
      <!-- <el-button @click="unAuthorizedVisible = true">解除授权</el-button> -->
    </div>
    <!-- 授权弹窗 -->
    <!-- <el-dialog :visible.sync="authorizedVisible" width="600px">
      <template slot="title">
        <div>授权开通微信小程序</div>
      </template>
      <div class="dialog-content flex column a-center">
        <span class="text-1">请小程序管理员扫码授权</span>
        <img src="https://cdn2.thecatapi.com/images/e8t.jpg" alt="" />
        <span class="text-2">授权成功后请点击“我已授权”，刷新页面</span>
      </div>
      <div slot="footer">
        <el-button @click="authorizedVisible = false">关闭</el-button>
        <el-button
          type="primary"
          :disabled="pending"
          :loading="pending"
          @click="checkAuthorized"
          size="small"
        >我已授权</el-button
        >
      </div>
    </el-dialog> -->
    <!-- 解除授权弹窗 -->
    <el-dialog :visible.sync="unAuthorizedVisible" width="600px">
      <template slot="title">
        <div>解除授权提示</div>
      </template>
      <div class="dialog-content flex column a-center">
        <span class="text-1"
        >解除授权后，若开通产品小程序二维码将会导致功能无法使用，确认解除授权吗？</span
        >
      </div>
      <div slot="footer">
        <el-button @click="unAuthorizedVisible = false">取消</el-button>
        <el-button
          type="primary"
          :disabled="pending"
          :loading="pending"
          @click="checkAuthorized"
          size="small"
        >确定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  wechatGetAuthInfo
} from '@src/api/DoMyself.js';
export default {
  name: 'mini-program-set',
  data() {
    return {
      isAuthorized: false,
      authorizedVisible: false,
      unAuthorizedVisible: false,
      pending: false,
      weChatInfo:{}, // 授权信息
      authorizedUrl:'', // 授权地址
      authorizationTimer:null
    };
  },
  created(){
    this.wechatGetAuthInfo()
  },
  methods: {
    // 获取授权信息-小程序
    async wechatGetAuthInfo(){
      const {data} = await wechatGetAuthInfo()
      if(data.status == 1){
        this.weChatInfo = data.data
        this.isAuthorized = true
      }else if(data.status == 0){
        this.authorizedUrl = data.mpAuthorizeUrl
      }
      return data.status
    },
    async authorizationClick() {
      this.pending = true
      // 跳转到授权页面
      this.toAuthorizationPage()
      // 轮询查询是否授权
      this.authorizationTimer = setInterval(async ()=>{
        console.info('小程序授权中')
        // 1.判断用户是否手动关闭了授权页面
        let openPage = await this.isOpenAuthorizationPage()
        if(!openPage){
          console.info('用户手动关闭微信小程序授权页面')
          this.pending = false
          // 如果关闭了页面停止轮询
          clearInterval(this.authorizationTimer)
          return
        }
        // 开始轮询查询 status 1：授权 0未授权
        const status = await this.wechatGetAuthInfo()
        if(status == 1){
          console.info('小程序授权成功')
          this.pending = false
          // 这是哪个页面来着
          this.$platform.closeTab('miniProgram_auth');
          clearInterval(this.authorizationTimer)
        }
      }, 1000)
    },
    // 确认授权
    checkAuthorized() {
      this.pending = true;
      this.isAuthorized = true
      this.authorizedVisible = false
      // window.location.reload();
    },
    // 跳转到授权页面
    toAuthorizationPage(){
      let fromId = window.frameElement.getAttribute('id');
      this.$platform.openTab({
        id: 'miniProgram_auth',
        title: this.$t('common.pageTitle.otherPageTitle.miniProgramSet.title1'),
        url: this.authorizedUrl,
        reload: true,
        close: true,
        fromId,
        isNeedConvertUrl: false
      });
    },
    isOpenAuthorizationPage(){
      return new Promise((resolve)=>{
        setTimeout(()=>{
          let iframes = Array.from(window.parent.document.getElementsByTagName('iframe'));
          let page = iframes.find((item=>item.id.includes('miniProgram_auth')))
          resolve(!!page)
        })
      })
    }
  },
};
</script>

<style scoped lang='scss'>
.wrapper {
  width: 100%;
  background: #fff;
  padding: 15px 20px;
  box-sizing: border-box;
  margin-left: 10px;
  .authorized-box {
    .title {
      font-size: 16px;
    }
    .desc {
      font-size: 16px;
      margin: 24px 0;
    }
  }
  .unauthorized-box {
    .title {
      font-size: 16px;
    }
    .miniProgram-code {
      width: 90px;
      height: 90px;
      margin-right: 15px;
    }
    .company {
      &-logo {
        width: 35px;
        height: 35px;
        border-radius: 50%;
        margin-right: 10px;
      }
      &-miniProgramName {
        font-size: 16px;
      }
      &-name {
        font-size: 16px;
      }
    }
  }
  .dialog-content {
    padding: 10px 0;
    min-height: 100px;
    img {
      width: 140px;
      height: 140px;
      margin: 10px 0;
    }
    span {
      font-size: 16px;
    }
  }
}
</style>